{"id":15685,"date":"2020-09-01T09:47:33","date_gmt":"2020-09-01T13:47:33","guid":{"rendered":"https:\/\/www.gravityforms.com\/?p=15685"},"modified":"2020-09-21T14:43:41","modified_gmt":"2020-09-21T18:43:41","slug":"how-to-add-images-to-a-form","status":"publish","type":"post","link":"https:\/\/www.gravityforms.com\/how-to-add-images-to-a-form\/","title":{"rendered":"How to\u2026 Add Images to a Form"},"content":{"rendered":"

\"HowGravity Forms enables you to create stylish forms that connect with your audience and boost conversions. Adding images to forms can further enhance user engagement, personalizing or adding excitement to the form process, and ensuring your forms convey the right message.<\/p>\n

<\/p>\n

With Gravity Forms, embedding images into forms is a quick and easy process. In this \u2018How to\u2026\u2019 article, we will look at a few different ways you can add images to a form, including a third-party plugin that can do the job for you.<\/p>\n

Let\u2019s get started\u2026<\/p>\n

Note:<\/strong> The images shown within this article use the new Gravity Forms 2.5 form builder. 2.5 is currently in beta, but if you like what you see, check out this article<\/a> for more information on 2.5 and how to install 2.5-beta-1.\u200c<\/div>\n

Uploading Images<\/h2>\n

With Gravity Forms, you can display custom images within your form. This allows you to use relevant and attention-grabbing images that your users will relate and respond to. To add images to a form you will first need to upload your chosen images to your website\u2019s media library.<\/p>\n

To do so, within your WordPress dashboard, select Media > Library > Add New > Select Files<\/strong>.<\/p>\n

\"Media<\/p>\n

Then simply select the images you want to use and upload them to the media library - once uploaded, these images are then ready to be embedded into a form.<\/p>\n

Adding an Image to a Form<\/h2>\n

\"Special<\/p>\n

To add a stand-alone image to a form, open the specific form and then select the HTML<\/strong> field, which you will find under Standard Fields<\/strong>.<\/p>\n

\"HTML<\/p>\n

Switch over to your Media Library<\/strong> and copy the URL of the image you would like to embed.<\/p>\n

\"Image<\/p>\n

Then, in the HTML<\/strong> field, under Content<\/strong>, paste in the URL within these parameters\u2026<\/p>\n

<img src=\u201cPaste Image File URL Here\u201d><\/strong><\/p>\n

Check out the image below to see this in action\u2026<\/p>\n

\"HTML<\/p>\n

You will now need to save and preview the page to check that your image has been embedded into your form.<\/p>\n

An HTML field can be added anywhere within a form, enabling you to add as many images as you want, wherever you deem appropriate. For more information on using the HTML field to add JavaScript or other HTML content to your forms, check out the Gravity Forms Docs<\/a>.<\/p>\n

Adding Images to Other Form Fields<\/h2>\n

\"Radio<\/p>\n

As well as the HTML<\/strong> form field, images can also be added within other fields. This can be useful if you want your users to choose from a list of options, as you can display an image for each option helping people to easily make a decision.<\/p>\n

To set this up, firstly you will need to choose the appropriate field that you want to use to display your options. Here we have selected Radio Buttons<\/strong>\u2026<\/p>\n

\"Radio<\/p>\n

Under Radio Button <\/strong>Field Settings > General > Choices<\/strong>, you can edit the text for each radio button as well as add an image for each choice. To add an image, follow the same process as discussed previously - copy the URL of the image and then enter it within these parameters <img src=\u201cPaste Image File URL Here\u201d><\/strong><\/p>\n

\"Radio<\/p>\n

After you have entered an image for each choice, again save and preview the form.<\/p>\n

Top Tip:<\/strong> If you would like the images to appear in two, or more, columns (see the image at the top of this section) then you will need to enter the relevant CSS Ready Class, which for two columns is gf_list_2col<\/strong>. This should be entered in the Radio Buttons Field Settings<\/strong> > Appearance > Custom CSS Class<\/strong>.<\/p>\n

\"Ready<\/p>\n

For more information on Ready Classes, check out this CSS Ready Classes Guide<\/a>.<\/p>\n

Once the form is live, the user just has to click on the relevant image to select a specific option. This is a great way to create user-friendly forms, encouraging your audience to complete and submit forms, and helping your website to achieve its goals.<\/p>\n

Rather Use a Plugin?<\/h2>\n

If adding HTML markup to form fields isn\u2019t for you, then of course there\u2019s a third-party plugin that you can use instead. Gravity Forms Image Choices<\/a> is a premium add-on brought to you by JetSloth<\/a>, one of the Gravity Forms Certified Developers<\/a>.<\/p>\n

With this add-on, you can seamlessly embed images into Checkbox or Radio Button fields, as well as enable a lightbox feature to give users a better viewing experience. This add-on also supports Polls, Surveys, and Quiz fields, as well as the Product and Option fields when Checkbox or Radio Buttons are selected.<\/p>\n

Final Thoughts on How to Add Images to a Form<\/h2>\n

Displaying images within a form adds significantly to aesthetics and user experience, so it is well worth taking the time to add stylish and relevant images. As always with Gravity Forms, there are numerous options when it comes to embedding images into a form, so simply select the strategy that works best for you and your forms - let us know how you get on!<\/p>\n

Not a Gravity Forms customer yet? Sign up for our free demo<\/a> to check out just how easy it is to add an image to a form. You can also view our numerous form templates as well as create your own forms.<\/p>\n

Any questions on embedding an image into a form? Please ask away in the comments below\u2026<\/em><\/p>\n

 <\/p>\n

\n

\"Gravity<\/p>\n

If you want to keep up-to-date with what's happening on the blog sign up for the Gravity Forms newsletter!<\/strong><\/p>\n\n

<\/div>
\n